<template>
	<view class='kind dFlex fWap jBetween_aStart'>
		<view class="kindContiner dFlex jBetween_aStart" :style="'height:'+contentHeight+'px;'">
			<view class="kindList">
				<view @click='changeKind(item)' :class="['kindOne',actKindId == item.styleId?'act':'']" v-for="(item,index) in list" :key='index'>{{item.style_name}}</view>
			</view>
			<view class="kindShop">
				<view class="banner imgPublic" @click='goPage("/person/vip")' v-if='is_show!="2"'>
					<image :src="adv" mode="widthFix"></image>
				</view>
				<view class="commonTit dFlex jBetween_aCenter" v-if='actKindId == "999"'>
					<!-- <view class="tit">优质服务</view> -->
					<!-- <view class="more">
						<text>全部商品</text>
						<uni-icons type="right" size="14" color="#999999"></uni-icons>
					</view> -->
				</view> 
				<view></view>
				<view class="shops dFlex jBetween_aStart fWap">
					<view class="shopOne" v-for="(item,index) in secondList" :key='index' @click='kindDetail(item.productId)'>
						<view class="shopImg imgPublic dFlex jCenter_aCenter+">
							<image lazy-load="true"  :src="item.index_image" mode="widthFix"></image>
						</view>
						<view class="shopInfo">
							<view class="shopName">{{item.style_name}}</view>
							<view class="shopPrice">{{item.min_price}}</view>
						</view>
					</view>
					<view class="shopOne" v-for='(item,index) in alternate' :key='index'></view>
				</view>
			</view>
		</view>
		<tabbar actIdx='1' ref='tabbar' class='tabbar' :identity='identity'></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identity:uni.getStorageSync('identify')?uni.getStorageSync('identify'):'1',
				adv:'',
				list:[],
				is_show:'2',
				secondList:[],
				contentHeight:'',
				actKindId:'',
			};
		},
		onLoad(){
			this.$nextTick(()=>{
				// #ifdef APP-PLUS
				uni.hideTabBar();
				// #endif
				this.$refs.tabbar.init();
			})
			this.initKind();
		},
		onShow(){
			this.contentHeight = uni.getSystemInfoSync().windowHeight - 50;
			if(uni.getStorageSync('act_styleId')){
				this.$nextTick(()=>{
					this.actKindId = uni.getStorageSync('act_styleId');
					this.secondList = this.list.find((item)=>{ return item.styleId == this.actKindId }).son;
					uni.removeStorageSync('act_styleId');
				})
			}
		},
		computed:{
			alternate(){
				if(this.secondList.length <= 3){
					return 3 - this.secondList.length;
				}else{
					return 3 - (this.secondList.length % 3);
				}
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initKind(){
				this.tool.getData('Index/styleList',{
					device:getApp().globalData.platform,
					// #ifdef MP-WEIXIN
					platform:'mini',
					// #endif
					// #ifdef APP-PLUS
					platform:'APP',
					// #endif
				}).then(res=>{
					console.log('分类列表');
					console.log(res);
					if(res){
						this.list = res.list.length?res.list:[];
						this.adv = res.image;
						this.is_show = res.is_show;
						this.secondList = this.list[0].son;
						this.actKindId = this.list[0].styleId;
						console.log(this.list);
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改一级分类
			changeKind(line){
				this.actKindId = line.styleId;
				this.secondList = line.son;
			},
			// 查看分类详情
			kindDetail(productId){ 
				 uni.navigateTo({
				 	url:"/kind/shopDetail?productId="+productId,
				 })
				/* uni.navigateTo({
					url:'/kind/kindDetail?type=1&styleId='+styleId,
				}) */
			},
			goPage(url){
				uni.navigateTo({
					url:url,
				})
			}
		}
	}
</script>

<style lang="scss">
	.kind{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.kindContiner{
			width:100%;
			background: white;
			.kindShop{ 
				flex: 1;
				height: 100%;
				overflow: auto;
				padding: 12px;
				box-sizing: border-box;
				.shops{
					width: 100%;
					.shopOne{
						width: calc(100% / 3.25);
						margin-bottom: 10px;
						display:inline-block;
						vertical-align: top;
						.shopInfo{
							width: 100%;
							text-align: center;
							.shopName{
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 13px;
								margin: 5px 0;
							}
							.shopPrice{
								font-size: 12px;
								color:#FF3A1A;
							}
						}
						.shopImg{
							width: 100%;
							height: 80px;
							border-radius: 4px;
							overflow: hidden;
						}
					}
				}
				.banner{
					width: 100%;
					margin-bottom: 12px;
				}
			}
			.kindList{
				width: 27%;
				height: 100%;
				overflow: auto;
				background: #F8F8F8;
				.kindOne{
					width: 100%;
					text-align: center;
					padding: 14px 0;
					font-size: 13px;
					color:#666666;
				}
				.act{
					background:#1664FF;
					color:white;
					font-weight:bold;
				}
			}
		}
	}
	page{
		width: 100%;
		height: 100%;
	}
</style>
